<!--电影详情页-->
<template>
	<div class="details_view">
		<!-- 顶部电影信息 -->
		<header class="header">
			<div class="header_image">
				<a-image width="200" height="300" :src="details.movieImg" />
			</div>
			<!-- 电影信息展示 -->
			<div class="header_sider">
				<h1>{{ details.movieName }}</h1>
				<a-space>
					<a-tag v-for="x in details.movieCategory" :key="x">{{
						x
					}}</a-tag>
				</a-space>
				<p>
					<span><icon-location /> {{ details.movieArea }}</span>
					<span
						><icon-schedule />{{ details.movieDuration }}分钟</span
					>
				</p>
				<p><icon-dashboard />上映时间:{{ details.movieTime }}</p>
				<p>
					<span
						><icon-video-camera /> 观看次数:{{
							details.movieNumDownload
						}}</span
					>
					<span
						><icon-thumb-up /> 点赞次数:{{
							details.movieNumSuppose
						}}</span
					>
				</p>
			</div>
			<!-- 用户评分 -->
			<div class="header_sider_rate">
				<div class="header_sider_favorite">
					<a-button
						type="primary"
						:disabled="!isLogined"
						@click="setFavorite"
					>
						<template #icon>
							<icon-heart-fill v-if="isFavorite" />
							<icon-heart v-else />
						</template>
						<template #default>{{
							isFavorite ? '已收藏' : '收藏'
						}}</template>
					</a-button>
				</div>
				<p v-show="!isLogined">未登录</p>
				<a-rate
					v-model="userRate"
					allow-half
					:color="color"
					@change="userRateChange"
					:disabled="!isLogined"
				/>
			</div>
		</header>
		<!-- 中间电影相关信息 -->
		<main>
			<a-space direction="vertical" fill>
				<template #split>
					<a-divider />
				</template>
				<div class="content">
					<div class="content_header">
						<h2>电影简介</h2>
					</div>
					<div class="content_main">
						<p>{{ details.movieContext }}</p>
					</div>
				</div>
				<div class="content">
					<div class="content_header">
						<h2>电影评分</h2>
					</div>
					<div class="content_main">
						<a-rate
							v-if="isAvgRateEmpty"
							v-model="avgRate"
							allow-half
							readonly="true"
							:color="color"
						/>
						<a-empty v-else />
					</div>
				</div>
				<!-- 评论区 -->
				<div class="content">
					<div class="content_header">
						<h2>电影评论</h2>
						<a @click="changeSort">{{ sortTitle }}</a>
					</div>
					<div class="content_main">
						<a-comment
							v-for="item in commentList"
							:key="item"
							:author="item.username"
							:datetime="item.sendDate"
						>
							<template #actions>
								<span class="action" key="heart">
									<icon-thumb-up />
									{{ item.commentNumSuppose }}
								</span>
							</template>
							<template #avatar>
								<a-avatar
									:imageUrl="item.users[0].userAvatar"
									v-if="item.users[0].userAvatar"
									@click="goUserSpace(item.user_id)"
								></a-avatar>
								<a-avatar
									@click="goUserSpace(item.user_id)"
									v-else
									>{{ item.username }}</a-avatar
								>
							</template>
							<template #content>
								<p class="comment_text">{{ item.context }}</p>
							</template>
						</a-comment>
						<a-empty v-if="commentList.length < 1">
							<template #image> <icon-pen /> </template>
							该电影暂未有评论 快来发布第一条评论吧!
						</a-empty>
					</div>
					<a-textarea
						placeholder="发表您的评论吧!"
						v-model="commentText"
						:max-length="{ length: 150, errorOnly: true }"
						allow-clear
						show-word-limit
						:disabled="!isLogined"
					/>
					<a-button
						:status="buttonStatus"
						@click="sendComment"
						:disabled="buttonDisabled || !isLogined"
						>{{ !isLogined ? '未登录' : '发表' }}
					</a-button>
				</div>
			</a-space>
		</main>
	</div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import movieApi from '../../api/movie'
import isLogin from '../../utils/isLogin'
const route = useRoute(),
	router = useRouter(),
	movieID = route.params.id,
	details = ref({}),
	isFavorite = ref(false),
	favoriteId = ref(''),
	userRate = ref(0),
	avgRate = ref(0),
	isAvgRateEmpty = ref(true),
	commentList = ref({}),
	color = {
		2: '#c0392b',
		3: '#e74c3c',
		4: '#d35400',
		5: '#e67e22'
	},
	sortTitle = ref('升序  ↑'),
	commentText = ref(''),
	buttonStatus = ref('success'),
	buttonDisabled = ref(false),
	isLogined = isLogin()
// 获取对应电影详情
movieApi.getMovieDetails(movieID).then(res => {
	details.value = res
})
// 当用户登录才会去请求对应内容
if (isLogin()) {
	// 获取用户评分
	movieApi.getUserRate(movieID).then(res => {
		userRate.value = res
	})
	// 获取用户是否收藏该电影
	movieApi.getIsFavoriteMovie(movieID).then(res => {
		if (res.status == 1) {
			isFavorite.value = false
		} else {
			isFavorite.value = true
			favoriteId.value = res.find_movie[0]._id
		}
	})
}
// 获取电影平均评分
movieApi.getAvgRate(movieID).then(res => {
	!isNaN(res) ? (avgRate.value = res) : (isAvgRateEmpty.value = false)
})

// 获取电影评论
function getCommentList() {
	movieApi.getCommentList(movieID).then(res => {
		res.sort((a, b) => {
			return a.sendDate - b.sendDate
		}).forEach(x => {
			x.sendDate = movieApi.transformDate(x.sendDate)
		})
		commentList.value = res
	})
}
getCommentList()

// 更新或评价当前电影
function userRateChange(value) {
	if (isLogin()) {
		movieApi.setUserRate(details.value._id, details.value.movieName, value)
	} else {
		AMessage.error('未登录！')
	}
}

// 收藏电影
function setFavorite() {
	// 判断是否收藏来决定是取消还是收藏
	if (isFavorite.value) {
		movieApi.delFavoriteMovie(favoriteId.value).then(() => {
			isFavorite.value = false
		})
	} else {
		movieApi
			.setFavoriteMovie(details.value._id, details.value.movieName)
			.then(res => {
				favoriteId.value = res
				isFavorite.value = true
			})
	}
}

// 修改排序
function changeSort() {
	if (sortTitle.value === '升序  ↑') {
		sortTitle.value = '降序  ↓'
		commentList.value.sort((a, b) => {
			return Date.parse(b.sendDate) - Date.parse(a.sendDate)
		})
	} else {
		sortTitle.value = '升序  ↑'
		commentList.value.sort((a, b) => {
			return Date.parse(a.sendDate) - Date.parse(b.sendDate)
		})
	}
}

// 添加评论
function sendComment() {
	if (commentText.value !== '') {
		movieApi
			.setUserComment(
				details.value._id,
				details.value.movieName,
				commentText.value
			)
			.then(() => {
				commentText.value = ''
				getCommentList()
			})
	} else {
		AMessage.error('评论内容为空!')
	}
}

// 前往个人空间
function goUserSpace(id) {
	router.push(`/userSpace/${id}`)
}

// 监听评论长度
watch(
	() => commentText,
	() => {
		console.log(commentText)
		if (commentText.value.length > 150) {
			buttonStatus.value = 'danger'
			buttonDisabled.value = true
		} else {
			buttonStatus.value = 'success'
			buttonDisabled.value = false
		}
	},
	{
		deep: true
	}
)
</script>

<style lang="scss" scoped>
.details_view {
	display: flex;
	flex-direction: column;
	width: 1280px;
	min-width: 1280px;
	margin: 0 auto;
	padding: var(--normal-distance);
	background-color: var(--main-2-bg);

	* + * {
		margin-top: var(--normal-distance);
	}
	// 头部
	.header {
		display: flex;
		align-items: baseline;
		color: var(--fc-bg);
		& > * + * {
			margin-left: var(--normal-distance);
		}

		.header_image {
			border: 10px solid rgba($color: #7f8c8d, $alpha: 0.3);
			border-radius: 5px;
		}

		.header_sider {
			p > span + span {
				margin-left: var(--normal-sm-distance);
			}
		}

		.header_sider_rate {
			display: flex;
			margin-left: auto;
			margin-right: var(--normal-distance);
			align-items: center;

			* {
				margin-top: 0;
				margin-bottom: 0;
			}

			* + * {
				margin-left: var(--normal-distance);
			}
		}
	}
	// 评论区
	.content {
		display: flex;
		flex-direction: column;
		gap: var(--normal-distance);

		.content_header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: var(--normal-distance);
			background-color: var(--ti-bg);
			border-left: 10px solid var(--br-bg);
			color: var(--fc-bg);

			a {
				margin-top: 0;
				margin-right: var(--normal-distance);
				cursor: pointer;
				color: var(--fc-bg);
			}

			a:hover {
				color: #2d3436;
			}
		}

		.content_main {
			:deep(p) {
				color: var(--fc-bg);
			}
			.comment_text {
				width: 500px;
				word-break: break-all;
			}
		}
	}
}
:deep(.arco-textarea-wrapper) {
	background-color: var(--main-bg);
}
:deep(.arco-tag.arco-tag-size-medium.arco-tag-checked) {
	background-color: var(--main-bg);
	color: var(--fc-bg);
}
:deep(.arco-comment-author) {
	color: var(--fc-bg);
}
:deep(.arco-comment-actions) {
	color: var(--fc-bg);
}
</style>
